<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<style>
html {
    background: rgb(255, 252, 239);
}

audio,
video {
    vertical-align: top;
    width: 40%;
}
</style>

<script>
    if(!location.hash.replace('#', '').length) {
        location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
        location.reload();
    }
</script>

<h1><a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection</a> one-page demo</h1>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>

<button>Setup RTC-Multi-Connection</button>
<hr />

<script>
//window.skipRTCMultiConnectionLogs=true;

var channels = {};

function openSignalingChannel(config) {
    var channel = config.channel || this.channel;
    var socket = {
        send: function(data) {
            channels[channel].send(data);
        },
        onmessage: function(data) {
            config.onmessage(data);
        }
    };
    if (!channels[channel])
        channels[channel] = {
            send: function(data) {
                for (var i = 0; i < this.onmessages.length; i++) {
                    var onmessage = this.onmessages[i];
                    onmessage(data);
                }
            },
            onmessages: [socket.onmessage]
        };
    else channels[channel].onmessages.push(socket.onmessage);

    if (config.onopen) setTimeout(config.onopen, 1);
    return socket;
}
</script>

<script>
document.querySelector('button').onclick = function() {
    initRTCMultiConnection();
    this.disabled = true;
};
</script>

<script>
function initRTCMultiConnection() {
    // -------------- offerer
    var offerer = new RTCMultiConnection();
    offerer.enableSessionReinitiation = false;
    offerer.session = {
        video: true,
        audio: true
    };
    offerer.openSignalingChannel = openSignalingChannel;
    offerer.onstream = function(e) {
        if (e.type == 'local') return;

        document.body.appendChild(e.mediaElement);
    };
    offerer.onRequest = function(userid, extra) {
        console.log('offerer received "participation request" from answerer.');
        offerer.accept(userid, extra);
    };
    offerer.open();

    // -------------- answerer

    var answerer = new RTCMultiConnection();
    answerer.enableSessionReinitiation = false;
    answerer.openSignalingChannel = openSignalingChannel;
    answerer.dontAttachStream = true;

    answerer.onstream = function(e) {
        if (e.type == 'local') return;

        document.body.appendChild(e.mediaElement);
    };

    answerer.onNewSession = function(session) {
        console.log('on:NewSession is fired for answerer.', session);
        answerer.attachStreams = answerer.attachStreams;
        answerer.join(session);
    };
    answerer.connect();
}
</script>